<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.2);
        }
        .loading{
            position: absolute;
            top: 50%;
            left: 50%;
            /* %取值是相对当前元素自身的 */
            /* transform: translate(-50%,-50%); */

            display: inline-block;
            width: 50px;
            height: 50px;
            border: 6px solid #dedede;
            border-top-color: orange;
            animation: rotate ease 1s infinite;
            transform: translate(-50%,-50%) rotate(0deg);
            border-radius: 50%;
        }
        @keyframes rotate {
            0%{
                transform: translate(-50%,-50%) rotate(0deg) scale(1);
            }
            /* 50%{
                transform: translate(-50%,-50%) rotate(180deg) scale(0.5);
            } */
            100%{
                transform: translate(-50%,-50%) rotate(360deg) scale(1);
            }
        }
    </style>
    <script>
        // 设计模式:在一个特定场景下用于解决特定问题给定的固定代码结构
        //      1.单例模式:在一个应用运行过程中，保证某个功能对象有且仅有一个
        
        // 懒汉模式
        (function(){
            // 是否已经存在该user对象
            let temp = null;
            // User构造器方法
            // function CreateUser(){
                
            // }
            function User(){
                
            }
            // 构造壳子 
            window.User = function(){
                // 判断记录的temp是否已经存在对象
                if(temp){
                    // 存在，返回已存在对象
                    return temp;
                }else{
                    // 不存在，通过真实构造器创建新对象，并记录于temp中
                    // temp = new CreateUser()
                    temp = new User()
                    // 返回创建的对象
                    return temp;
                }
            }
        })()
        let u = new User();
        let u1 = new User();
        console.log(u==u1);


        // 饿汉模式
        (function(){
            function Stu(){}
            let temp = new Stu()
            window.Stu = function(){
                return temp;
            }
        })()
        let s = new Stu();
        let s1 = new Stu();
        console.log(s==s1);


        // 单例的应用
        (function(){
            let boxDom = null;
            let count = 0; // 记录要求被开启多少次
            function createLoadingDom(){
                let boxDom = document.createElement("div");
                boxDom.className = "box";
                let loadingDom = document.createElement("div");
                loadingDom.className = "loading";

                boxDom.appendChild(loadingDom);
                return boxDom;
            }
            window.startLoading = function(){
                count++; // 记录有多少功能需要开启loading
                if(!boxDom){
                    boxDom = createLoadingDom();
                    document.body.appendChild( boxDom );
                }
                console.log("add:",count)
            }
            window.doneLoading = function(){
                count--;// 记录有多少功能已经结束
                if(count<=0){
                    // 当全部功能结束,彻底关闭DOM
                    document.body.removeChild( boxDom );
                    boxDom = null;
                }
                console.log("sub:",count)
            }
        })()
        function openLoading(){
            // let boxDom = document.createElement("div");
            // boxDom.className = "box";
            // let loadingDom = document.createElement("div");
            // loadingDom.className = "loading";
            // boxDom.appendChild(loadingDom);
            // document.body.appendChild(boxDom);
            startLoading();
        }
    </script>
</head>
<body>
    <input type="button" value="loading" onclick="openLoading()">

    <!-- <div class="box">
        <div class="loading"></div>
    </div> -->
</body>
</html>